<template>
  <!-- ef-node-pmenu -->
  <div class="ef-node-pmenu" ref="tool">
    <draggable v-model="menuList" item-key="id" @end="end" @start="move" :options="draggableOptions">
      <template #item="{ element }">
          <span class="ef-node-menu-li" :type="element.type"><i :class="element.ico"></i> {{ element.name }}</span>
      </template>
    </draggable>
  </div>
</template>
<script setup>
import { onMounted, ref, defineEmits, inject } from "vue";
import draggable from "vuedraggable";

const emit = defineEmits(["addNode"]);
const defaultOpeneds = ref(["1"]);

var mousePosition = {
  left: -1,
  top: -1
};
const activeNames = ref("1");
// draggable配置参数参考 https://www.cnblogs.com/weixin186/p/10108679.html
const draggableOptions = ref({
  preventOnFilter: false,
  sort: false,
  disabled: false,
  ghostClass: "tt",
  // 不使用H5原生的配置
  forceFallback: true
  // 拖拽的时候样式
  // fallbackClass: 'flow-node-draggable'
});
// 默认打开的左侧菜单的id
const menuList = ref([
  {
    nodeType: 11,
    type: '派工节点',
    name: "派工节点",
    ico: "up-User",
    open: false
  },
  {
    nodeType: 12,
    type: "经办节点",
    name: "经办节点",
    ico: "up-User",
    // 自定义覆盖样式
    style: {}
  },
  {
    nodeType: 13,
    type: "审批节点",
    name: "审批节点",
    ico: "up-User",
    // 自定义覆盖样式
    style: {}
  },
  {
    type: "子流程节点",
    nodeType: 14,
    name: "子流程节点",
    ico: "up-User"
  },
  {
    type: "自动节点",
    nodeType: 15,
    name: "自动节点",
    ico: "up-User",
    // 自定义覆盖样式
    style: {},
    show: true
  },
  {
    type: "并行分支节点",
    nodeType: 16,
    name: "并行分支节点",
    ico: "up-User",
    // 自定义覆盖样式
    style: {}
  },
  {
    type: "条件分支节点",
    nodeType: 17,
    name: "条件分支节点",
    ico: "up-User",
    // 自定义覆盖样式
    style: {}
  }
]);
const nodeMenu = ref({});

onMounted(() => {
  /**
   * 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
   * @param event
   */
  if (isFirefox()) {
    document.body.ondrop = function (event) {
      // 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
      mousePosition.left = event.layerX;
      mousePosition.top = event.clientY - 50;
      event.preventDefault();
      event.stopPropagation();
    };
  }
});

// 根据类型获取左侧菜单对象
const getMenuByType = (type) => {
  for (let i = 0; i < menuList.value.length; i++) {
    if (menuList.value[i].type === type) {
      return menuList.value[i];
    }
  }
};
// 拖拽开始时触发
const move = (evt, a, b, c) => {
  var type = evt.item.attributes.type.nodeValue;;
  nodeMenu.value = getMenuByType(type);
};
// 拖拽结束时触发
const end = (evt, e) => {
  emit("addNode", evt, nodeMenu.value, mousePosition);
};
// 是否是火狐浏览器
const isFirefox = () => {
  var userAgent = navigator.userAgent;
  if (userAgent.indexOf("Firefox") > -1) {
    return true;
  }
  return false;
};
</script>
<style lang="less" scoped>
.drag-container {
  display: flex;
  flex-direction: column;
  margin: 10px;
  overflow-y: auto;
}
</style>
